// components/akAnimatedBackground/akAnimatedBackground.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    colors: {
      value: ["#bac8ff", "#1c7ed6", "#91a7ff"],
      observer: function () {
        this.init()
      }
    },
    count: {
      value: 20,
      observer: function () {
        this.init()
      }
    },
    delay: {
      value: 60,
      observer: function () {
        this.init()
      }
    },
    size: {
      value: 20,
      observer: function () {
        this.init()
      }
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    css: [],
  },

  lifetimes: {
    ready() {
      this.init()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    init() {
      const {
        count,
        colors,
        delay,
        size
      } = this.data
      let css = []
      for (let n = 0; n < count; n += 1) {
        let e = delay,
          s = colors[n % colors.length],
          c = Math.floor(100 * Math.random() + 1),
          l = Math.floor(100 * Math.random() + 1),
          d = Math.floor(Math.random() * 20 + 1) + (e - 10),
          h = -(Math.floor(Math.random() * e + 1) * 1),
          u = Math.floor(50 * Math.random() + 1) - 25,
          p = Math.floor(50 * Math.random() + 1) - 25,
          g = Math.random() + .5 * size * .5,
          m = .5 > Math.random() ? -1 : 1,
          f = 2 * size * m;
        css.push(
          `color:${s};` +
          `top:${c}%;` +
          `left:${l}%;` +
          `animation-duration:${d}s;` +
          `animation-delay:${h}s;` +
          `transform-origin:${u}vw ${p}vh; ` +
          `box-shadow:${f}vmin 0 ${g}vmin currentColor; `+
          `width: ${size}vmin; height: ${size}vmin; border-radius: ${size}vmin;`
          )
      }
      this.setData({
        css
      })
    }
  }
})